<nz-affix class="toc-affix" *ngIf="isBrowser && data.con.toc?.length" nzOffsetTop="16">
  <nz-anchor nzShowInkInFixed nzAffix="false" (nzClick)="goLink($event)">
    <nz-link *ngFor="let t of data.con.toc" [nzHref]="'#' + t.id" [nzTitle]="t.title"></nz-link>
  </nz-anchor>
</nz-affix>
<ng-container *ngIf="meta.item">
  <nz-alert *ngIf="!meta.item.i18n" [nzType]="'warning'" [nzCloseable]="'true'" nzBanner [nzMessage]="message" class="my-md">
    <ng-template #message>
      This article has not been translated, hope that your can PR to translated it.
      <a href="//github.com/ng-alain/ng-alain/issues/74" target="_blank"> Help us!</a>
    </ng-template>
  </nz-alert>
  <div class="markdown">
    <h1>
      {{ meta.item.title }}
      <span *ngIf="meta.item.subtitle" class="subtitle">{{ meta.item.subtitle }}</span>
      <edit-button [item]="item"></edit-button>
    </h1>
  </div>
  <div *ngIf="data.con.content" class="markdown" [innerHTML]="data.con.content" routeTransfer></div>
  <div *ngIf="data.con.module" class="highlight">
    <pre class="hljs language-ts" [innerHTML]="data.con.module"></pre>
  </div>
  <ng-container *ngIf="data.demo">
    <h2 id="{{ demoStr }}" style="margin: 32px 0 24px 0;" [innerHTML]="demoContent" routeTransfer></h2>
    <ng-content></ng-content>
  </ng-container>
  <div *ngIf="data.con.api" class="markdown api-container" [innerHTML]="data.con.api" routeTransfer></div>
</ng-container>
